<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef">

    </ma-crud>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import adPosition from '@/api/cms/adposition.js'
import {Message} from '@arco-design/web-vue'

const crudRef = ref()

const crud = reactive({
  api: adPosition.getList,
  recycleApi: adPosition.getRecycleList,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationWidth: 200,
  add: {show: true, api: adPosition.save,},
  edit: {show: true, api: adPosition.update,},
  delete: {
    show: true,
    api: adPosition.deletes,
    realApi: adPosition.realDeletes
  },
  recovery: {show: true, api: adPosition.recoverys,},
  formOption: {viewType: 'drawer', width: 600},
  beforeEdit: (params) => {
    delete params.ads
    return true
  }
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {
    title: '广告位名称',
    dataIndex: 'name',
    search: true,
    commonRules: [{required: true, message: '广告位名称必填'}],
    width: 100,
  },
  {
    title: '调用代码名称', dataIndex: 'code', commonRules: [{required: true, message: '调用代码必填'}], width: 100,
  },
  {
    title: "投放广告",
    dataIndex: "ad_id",
    formType: "select",
    multiple: true,
    dict: {
      url: 'cms/adc/list',
      props: {label: 'name', value: 'id'},
    },
    translation: true,
    hide: true
  },
  {
    title: '投放广告名称', dataIndex: 'ads', addDisplay: false, editDisplay: false
  },
  {
    title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false, width: 180,
  },
])
</script>

<script>
export default {name: 'cms:adPosition'}
</script>

<style scoped></style>
  